<template>
	<div class="page-container">
		<div class="table-header">
			<div class="table-title">菜单管理</div>
			<a-space :size="8">
				<a-button type="primary" size="small" @click="openModal('add', 0)">新增</a-button>
				<a-button size="small">刷新</a-button>
			</a-space>
		</div>
		<a-divider style="margin: 8px 0;" />
		<a-table :columns="columns" :data-source="data" :row-selection="rowSelection" :pagination="false">
			<template #bodyCell="{ record, column }">
				<template v-if="column.key === 'icon'">
					<component :is="record.icon" style="font-size: 16px;" />
				</template>
				<template v-if="column.key === 'status'">
					<a-tag :color="record.status ? 'green' : ''">{{ record.status ? '启用' : '禁用' }}</a-tag>
				</template>
				<template v-if="column.key === 'action'">
					<a-space :size="8">
						<a-button type="primary" size="small" @click="openModal('children', record.id)">新增子菜单</a-button>
						<a-button size="small" @click="openModal('edit', record.id)">编辑</a-button>
						<a-popconfirm title="确认删除吗?" ok-text="确认" cancel-text="取消" @confirm="handleDelete(record.id)">
							<a-button type="primary" danger size="small">删除</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</a-table>
	</div>
	<!-- modal -->
	<MenuFormModal v-model="modalVisible" :type="modalType" :id="currentId" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { fetchPermissionByRole } from '@/apis/admin/permission';
import MenuFormModal from "@/components/admin/menu/MenuFormModal.vue";

// interface DataItem {
// 	key: number;
// 	name: string;
// 	icon: number;
// 	routerName: string;
// 	routerPath: string;
// 	status: number;
// 	children?: DataItem[];
// }
type Permission = {
	id: number;
	parentId: number;
	name: string;
	path: string;
	icon?: string;
	children?: Permission[];
};

const columns = [
	{
		title: '菜单ID',
		dataIndex: 'id',
		key: 'id',
		align: 'center'
	},
	{
		title: '菜单名称',
		dataIndex: 'name',
		key: 'name',
		align: 'center'
	},
	{
		title: '菜单图标',
		dataIndex: 'icon',
		key: 'icon',
		align: 'center'
	},
	{
		title: '路由名称',
		dataIndex: 'routerName',
		key: 'routerName',
		align: 'center'
	},
	{
		title: '路由路径',
		dataIndex: 'path',
		key: 'path',
		align: 'center'
	},
	{
		title: '菜单状态',
		dataIndex: 'status',
		key: 'status',
		align: 'center'
	},
	{
		title: '操作',
		key: 'action',
		align: 'center'
	}
];

const data = ref<Permission[]>([
	// {
	// 	key: 1,
	// 	name: '系统管理',
	// 	icon: 11,
	// 	routerName: 'sys',
	// 	routerPath: '/sys',
	// 	status: 1,
	// 	children: [
	// 		{
	// 			key: 11,
	// 			name: '菜单管理',
	// 			icon: 11,
	// 			routerName: 'menu',
	// 			routerPath: '/sys/menu',
	// 			status: 1
	// 		},
	// 		{
	// 			key: 12,
	// 			name: '角色管理',
	// 			icon: 11,
	// 			routerName: 'role',
	// 			routerPath: '/sys/role',
	// 			status: 1
	// 		}
	// 	],
	// },
	// {
	// 	key: 2,
	// 	name: '运控管理',
	// 	icon: 11,
	// 	routerName: '/yk',
	// 	routerPath: '/yk/index',
	// 	status: 0
	// }
]);

const getMenus = () => {
	fetchPermissionByRole<Permission[]>().then((res) => {
		data.value = res.data;
	});
};
onMounted(() => {
	getMenus();
});

const rowSelection = ref({
	checkStrictly: false,
	onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	},
	onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
		console.log(selected, selectedRows, changeRows);
	},
});

// 表格项删除
const handleDelete = (id: number | string) => {
	console.log('delete', id);
};

// 新增编辑弹窗
const modalVisible = ref<boolean>(false);
const modalType = ref<string>('add');
const currentId = ref<number | string>(0);
const openModal = (type: string, editId: number | string) => {
	modalType.value = type;
	currentId.value = editId || 0;
	modalVisible.value = true;
};
</script>

<style scoped lang="scss">
.table-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.table-title {
		font-size: 16px;
		font-weight: 500;
	}

	.ant-divider {
		margin: 12px 0;
	}
}
</style>
